<template>
  <div style="overflow: hidden">
    <h3 @click="Init">群组</h3>
    <div class="group-list">
      <GroupIntroduce class="group-item ani " v-for="(group,index) in groups" :key="index" :group="group"
                      @add="invote" @del="del" @contacts="contacts" @setting="tosetting">
      </GroupIntroduce>
    </div>
    <!--<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>-->

    <el-dialog title="邀请加入小组" :visible.sync="invoteVisible" size="tiny">
      <SearchFriendForm :isgroup="true" :group_id="gpid"></SearchFriendForm>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="quiteVisible" size="tiny">
      <span>你确定要退出这个群组吗,如果您是群主，那么群将解散</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="quiteVisible = false">取 消</el-button>
    <el-button type="primary" @click="del2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import NavCard from '@/components/smallComponents/navcard'
  import TabCard from '@/components/smallComponents/tabcard'
  import GroupIntroduce from '@/components/smallComponents/groupintroduce'
  import SearchFriendForm from '@/views/header/dialogs/search-friend'
  import { groupRead, groupQuit } from '@/public/api'

  export default {
    components: {NavCard, TabCard, GroupIntroduce, SearchFriendForm},

    data () {
      return {
        invoteVisible: false,
        quiteVisible: false,
        gpid: '',
        hello: '这是群组',
        card1: {
          title: '通知消息',
          btn_name: '',
          list_item: [
            {
              name: '下周二团建',
              link: 'http://www.baidu.com'
            }, {
              name: '每天团建',
              link: 'http://www.baidu.com'
            },
            {
              name: '下周二团建',
              link: 'http://www.baidu.com'
            }
          ]
        },
        groups: []
      }
    },
    methods: {
      Init () {
        groupRead({
          user_id: this.User_id
        })
          .then(
            data => {
              this.groups.length = 0
              if (data.status) {
                let content = data.data
                for (let i = 0; i < content.length; i++) {
                  this.groups.push({
                    id: content[i].group_info.group_id,
                    name: content[i].group_info.name,
                    desc: content[i].group_info.Introduction,
                    bg_image: content[i].group_info.wallpaper || 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506063505463&di=0ec510372a6e468b605a29b5c5c765e6&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F782cabc158c57d9e198e025060991146c5bb482c.jpg',
                    logo: content[i].group_info.avatar || '//tvax3.sinaimg.cn/crop.0.0.512.512.50/006quK43ly8fjgv9prtf1j30e80e83z6.jpg'
                  })
                }
              }
            }
          ).catch()
      },
      invote (id) {
        this.gpid = id
        this.invoteVisible = true
        console.log('add people')
      },
      del (id) {
        this.gpid = id
        this.quiteVisible = true
        console.log('退出群组确认框弹出')
      },
      del2 () {
        this.quiteVisible = false
        groupQuit({
          delete_id: this.User_id,
          group_id: this.gpid
        }).then(
          data => {
            if (data.status) {
              this.$message.success(`已经成功退出${this.gpid}小组`)
            } else {
              this.$message.error(`退出${this.gpid}小组失败`)
            }
          }
        ).catch(
          () => {
            this.$message.error(`退出${this.gpid}小组失败`)
          }
        )
      },
      tosetting (id) {
        console.log(`去${id}小组`)
        this.$router.push({name: 'GroupSettingPage', params: {group_id: id}})
      },
      contacts (id) {
        console.log(`去${id}小组的通讯录`)
        this.$router.push({name: 'GroupContacts', params: {group_id: id}})
      }
    },
    watch: {
      User_id (old, newvalue) {
        this.Init()
      }
    },
    mounted () {
      this.Init()
    },

    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    }
  }

</script>
<style scoped>

  .group-list {
    /*float: left;*/
    margin: 20px 40px;
    /*background: purple;*/
  }

  .group-item {
    margin-bottom: 20px;
    border-radius: 8px;
  }

  .ani {
    transform: scale(1);
  }

  .ani:hover {
    transform: scale(1.005);
    position: relative;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
    /*position: absolute;*/
    transition: transform .2s ease-in;
  }

  h3 {
    text-align: center;
  }
</style>
